<template>
  <div class="home">
    <van-nav-bar title="标题">
      <template #left>
        <van-icon name="search" size="24" color="#ffffff" @click="goPage('Search')"/>
      </template>
      <template #right>
        <van-icon name="contact" size="24" color="#ffffff"  @click="goPage('My')"/>
      </template>
    </van-nav-bar>

    <van-swipe class="my-swipe" indicator-color="#007aff">
      <van-swipe-item>
        <div class="shopList">
          <ul>
            <li
              v-for="(item, index) in shopList1"
              :key="index"
              @click="goPage('Delicacy')"
            >
              <div class="imgBox">
                <img :src="'https://fuss10.elemecdn.com' + item.image_url" />
              </div>
              <div class="text">{{ item.title }}</div>
            </li>
          </ul>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="shopList">
          <ul>
            <li
              v-for="(item, index) in shopList2"
              :key="index"
              @click="goPage('Delicacy')"
            >
              <div class="imgBox">
                <img :src="'https://fuss10.elemecdn.com' + item.image_url" />
              </div>
              <div class="text">{{ item.title }}</div>
            </li>
          </ul>
        </div>
      </van-swipe-item>
    </van-swipe>

    <div class="business">
      <div class="title">
        <van-icon name="shop-o" />
        <span>附近商家</span>
      </div>

      <ul class="business-box">
        <li
          class="shop-li"
          v-for="(item, index) in shopsList"
          :key="index"
          @click="goDetail(item.id, item.image_path, item.name)"
        >
          <div class="shopImg-box">
            <img :src="'//elm.cangdu.org/img/' + item.image_path" />
          </div>
          <div class="shop-text">
            <div class="top">
              <div class="left">
                <span class="brand">品牌</span
                ><span class="business-title">{{ item.name }}</span>
              </div>
              <div class="right">
                <span v-for="(item1, index1) in item.supports" :key="index1">{{
                  item1.icon_name
                }}</span>
              </div>
            </div>
            <div class="middle">
              <div class="left">
                <span>
                  <van-rate
                    v-model="item.rating"
                    readonly
                    allow-half
                    size="12px"
                    gutter="0px"
                    color="#ff9a0d"
                    void-color="#ccc"
                  />
                </span>
                <span class="rate-value">4.7</span>
                <span>月售{{ item.recent_order_num }}单</span>
              </div>
              <div class="right">
                <span class="takeaway">{{ item.delivery_mode.text }}</span>
                <span class="time">{{ item.supports[1].name }}</span>
              </div>
            </div>
            <div class="bottom">
              <div class="left">
                <span>&yen;{{ item.float_minimum_order_amount }}起送</span>
                <span class="line">/</span>
                <span>配送费约&yen;{{ item.float_delivery_fee }}</span>
              </div>
              <div class="right">
                <span>{{ item.distance }}</span>
                <span class="line">/</span>
                <span class="ps-time">{{ item.order_lead_time }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

import { useRouter } from "vue-router";

import axios from "axios";

export default defineComponent({
  name: "Home",
  setup() {
    let router: any = useRouter();
    //食品分类第一页
    let shopList1: any = ref<Array<any>>([]);
    //食品分类第二页
    let shopList2: any = ref<Array<any>>([]);
    //商铺列表
    let shopsList: any = ref<Array<any>>([]);

    // let router: any = useRouter();
    //跳转页面
    let goPage: (name: string) => void = (name: string): void => {
      router.push({ name });
    };

    let getShopList: () => void = (): void => {
      axios({
        method: "get",
        url: "https://elm.cangdu.org/v2/index_entry",
      })
        .then((res: any): void => {
          // console.log("res ==> ", res);
          for (let i: number = 0; i < 8; i++) {
            shopList1.value.push(res.data[i]);
          }
          for (let i: number = 8; i < res.data.length; i++) {
            shopList2.value.push(res.data[i]);
          }
          // console.log(shopList1.value);
          //   console.log(shopList2.value);
        })
        .catch((err: any): void => {
          console.log("err ==> ", err);
        });
    };
    let getshopsList: () => void = (): void => {
      axios({
        method: "get",
        url: "https://elm.cangdu.org/shopping/restaurants",
        params: {
          latitude: 31.22967,
          longitude: 121.4762,
        },
      })
        .then((res: any): void => {
          // console.log("res ==> ", res);
          shopsList.value = res.data;
          console.log("shopsList ==> ", shopsList.value);
        })
        .catch((err: any): void => {
          console.log("err ==> ", err);
        });
    };
    let goDetail: (id: number, name: string, img: string) => void = (
      id: number,
      name: string,
      img: string
    ): void => {
      router.push({
        name: "Detail",
        query: {
          id: id,
        },
      });
      let shop: any = {
        shopsId: id,
        shops: [],
        shopsImg: img,
        shopsName: name,
      };
      let shopData: any = localStorage.getItem("shopCart");
      if (shopData) {
        shopData = JSON.parse(shopData);
      } else {
        shopData = [];
      }
      for (let i: number = 0; i < shopData.length; i++) {
        if (shopData[i].shopsId === shop.shopsId) {
          return;
        }
      }
      shopData.push({ ...shop });
      localStorage.setItem("shopCart", JSON.stringify(shopData));
    };
    onMounted((): void => {
      getShopList();
      getshopsList();
    });
    return {
      //数据
      shopList1,
      shopList2,
      shopsList,

      goPage,
      goDetail,
    };
  },
});
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  // height: 617px;
  background-color: #f5f5f5;
  .van-nav-bar {
    background-color: #3190e8;
  }
  ::v-deep .van-nav-bar__title {
    color: white;
  }
  ::v-deep .van-swipe__indicator {
    background-color: #ccc;
    width: 8px;
    height: 8px;
    margin-left: 5px;
  }
  .shopList {
    width: 100%;
    height: 210px;
    background-color: white;

    ul {
      height: 185px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      overflow: hidden;
      li {
        width: 93px;
        height: 86px;
        margin-top: 5px;
        // background-color: pink;
        .imgBox {
          width: 43px;
          height: 43px;
          margin: 5px auto;
          img {
            width: 100%;
          }
        }
        .text {
          margin-top: 5px;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }
  .business {
    margin-top: 15px;
    background-color: #ffffff;
    margin-bottom: 50px;
    .title {
      font-size: 15px;
      margin-left: 10px;
      padding-top: 10px;
      color: #999999;
      span {
        margin-left: 5px;
      }
    }
    .business-box {
      margin-top: 20px;
      .shop-li {
        display: flex;
        margin-left: 10px;
        height: 107px;
        align-items: center;
        border-bottom: 1px solid #ccc;
        .line {
          margin-left: 3px;
          margin-right: 3px;
        }
        .shopImg-box {
          width: 73px;
          height: 73px;
          img {
            width: 64px;
            height: 64px;
          }
        }
        .shop-text {
          width: 284px;
          height: 73px;
          // background-color: green;
          .top {
            display: flex;
            justify-content: space-between;
            .brand {
              background-color: #ffd930;
            }
            .business-title {
              font-size: 14px;
              margin-left: 5px;
            }
            .right {
              span {
                border: 0.025rem solid #f1f1f1;
                margin-right: 1px;
              }
            }
          }
          .middle {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            .rate-value {
              margin-left: 5px;
              margin-right: 5px;
              font-size: 13px;
              color: #ff6000;
            }
            .takeaway {
              background-color: #3190e8;
              color: #ffffff;
              border: 0.025rem solid #3190e8;
              margin-right: 2px;
            }
            .time {
              color: #3190e8;
              border: 0.025rem solid #3190e8;
            }
          }
          .bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            .ps-time {
              color: #3190e8;
            }
          }
        }
      }
    }
  }
}
</style>